<!-- src/components/ProductList.vue -->
<template>
  <ul>
    <li v-for="item in productList" :key="item.id">
      商品：{{ item.title }} - 价格：{{ item.price }} - 库存：{{ item.inventory }}
      <br />
      <button @click="cartStore.addCart(item)" :disabled="!item.inventory">
        添加到购物车
      </button>
    </li>
  </ul>
</template>

<script setup lang="ts">
// 导入 pinia 的 storeToRefs 解构方法
import { storeToRefs } from 'pinia';
// 导入 pinia 容器
import useProductStore from '../store/product' // 商品状态管理
import useCartStore from '../store/cart' // 购物车状态管理

// 初始化容器对象
const productStore = useProductStore()
const cartStore = useCartStore()

// 调用获取商品列表数据的请求
productStore.getProductList();

// 通过解构获取容器对象中的 state
const { productList } = storeToRefs(productStore)
</script>